<template>
  <div class="flex flex-row w-full justify-between py-3 px-5">
    <van-checkbox v-model="cp_checked" @click="onClickCheckbox">全选</van-checkbox>
    <van-button
      class="w-[100px] h-[36px]"
      type="primary"
      color="#436BFF"
      @click="onConfirm"
      >确定{{count > 0 ? `(${count})` : ''}}</van-button
    >
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, computed } from "vue";

// const chooseAll = ref(false);
const emits = defineEmits(["onConfirm", "change", 'update:checked']);
const props = defineProps({
    checked: {
        type: Boolean,
    },
    count: {
        type: Number
    }
});   

const cp_checked = computed({
    set(v) {
       ;
        emits('update:checked',v)
    },

    get() {
        return props.checked;
    }
})

function onConfirm() {
    emits('onConfirm');
}

function onClickCheckbox() {
    // 此时内部状态还未改变，需要取反
    emits('change', !cp_checked.value);
}

</script>

<style lang="less" scoped></style>
